<template>
  <FormSection title="项目经验">
    <FormItem
      v-for="(project, index) in resumeData.projects"
      :key="index"
      @remove="removeProject(index)"
    >
      <FormGrid>
        <FormField
          label="项目名称"
          type="text"
          placeholder="请输入项目名称"
          v-model="project.name"
        />
        <FormField
          label="项目角色"
          type="text"
          placeholder="请输入项目角色"
          v-model="project.role"
        />
        <FormField
          label="项目时间"
          type="text"
          placeholder="如：2023.01-2023.06"
          v-model="project.duration"
        />
      </FormGrid>
      <div class="mt-4">
        <FormField
          label="项目描述"
          type="textarea"
          placeholder="请描述项目内容和技术栈"
          :rows="4"
          v-model="project.description"
        />
      </div>
    </FormItem>
    <AddButton text="添加项目经验" @click="$emit('add-project')" />
  </FormSection>
</template>

<script setup lang="ts">
import FormSection from './FormSection.vue'
import FormGrid from './FormGrid.vue'
import FormField from './FormField.vue'
import FormItem from './FormItem.vue'
import AddButton from './AddButton.vue'

interface Project {
  name: string
  role: string
  duration: string
  description: string
}

interface ResumeData {
  projects: Project[]
}

interface Props {
  resumeData: ResumeData
}

defineProps<Props>()

const emit = defineEmits<{
  'add-project': []
  'remove-project': [index: number]
}>()

const removeProject = (index: number) => {
  emit('remove-project', index)
}
</script>
